import { ProCard } from '@ant-design/pro-components';
import { Button, Checkbox, message } from 'antd';
import { useEffect, useState } from 'react';
import { useHistory, useModel } from 'umi';
import { useAuthVariable } from './hooks/useAuthVariable';
import { getAuthById, updateAuthById } from './service';
import type { AuthType } from './types.d';
import { EMPTYAUTH } from './types.d';
import { checkLen, onChange, onCheckAllChange, simplyInit } from './utils';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

const CheckboxGroup = Checkbox.Group;
const AuthConfig = () => {
  // const authId = '63467b0b7d81862db67849b1';
  // const ownerName = '目博科技';
  const history = useHistory<{
    authId: string;
    ownerName: string;
  }>();
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const CURRAUTH: AuthType = currUser?.auth || EMPTYAUTH;
  const state = history?.location?.state || {};
  const [authId] = useState(state.authId || '');
  const [chillDowning, setChillDowning] = useState<number>(0);
  if (chillDowning > -1) {
    setTimeout(() => {
      setChillDowning(chillDowning - 1);
    }, 1000);
  }
  // TODO: 扩展权限
  const OPER_SYSTEMUSER = CURRAUTH.systemUser || [];
  const OPER_SYSRECORD = CURRAUTH.sysRecord || [];
  const OPER_SENSORDEVICE = CURRAUTH.sensorDevice || [];
  const OPER_PATROLDEVICE = CURRAUTH.patrolDevice || [];
  const OPER_PARKINGLOT = CURRAUTH.parkinglot || [];
  const OPER_PARKINGSPOT = CURRAUTH.parkingspot || [];
  const OPER_BATCHTASK = CURRAUTH.batchTask || [];
  const OPER_CHARGERULE = CURRAUTH.chargeRule || [];
  const OPER_PARKINGRECORD = CURRAUTH.parkingRecord || [];
  const OPER_PARKINGORDER = CURRAUTH.parkingOrder || [];
  const OPER_TOLLCOLLECTOR = CURRAUTH.tollCollector || [];
  const OPER_MEMBER = CURRAUTH.member || [];
  const OPER_WECHATUSER = CURRAUTH.wechatUser || [];
  const OPER_ARREARSRECOVERY = CURRAUTH.arrearsRecovery || [];
  const OPER_REVENUE = CURRAUTH.revenue || [];
  const OPER_FAILUREREPORT = CURRAUTH.failureReport || [];
  const OPER_WEBAPPUSER = CURRAUTH.webAppUser || [];
  // const OPER_INVOICE = CURRAUTH.invoice || [];
  const OPER_ABNORMALAPPEAL = CURRAUTH.abnormalAppeal || [];
  const OPER_SCHEDULEMANAGEMENT = CURRAUTH.scheduleManagement || [];
  // TODO: 异常订单权限添加
  const OPER_PACKAGEMANAGER = CURRAUTH.packageManager || [];
  const OPER_SYSTEMCONFIG = CURRAUTH.systemConfig || [];
  const OPER_MERGE_ORDER = CURRAUTH.mergeOrder || [];
  const OPER_EXCEPTION_ORDER = CURRAUTH.abnormalOrder || [];

  // systemUser
  const systemUser = useAuthVariable(OPER_SYSTEMUSER);
  // tollCollector
  const tollCollector = useAuthVariable(OPER_TOLLCOLLECTOR);
  // sysRecord
  const sysRecord = useAuthVariable(OPER_SYSRECORD);
  // sensor
  const sensorDevice = useAuthVariable(OPER_SENSORDEVICE);
  // patrol
  const patrolDevice = useAuthVariable(OPER_PATROLDEVICE);
  // parkinglot
  const parkinglot = useAuthVariable(OPER_PARKINGLOT);
  // parkingspot
  const parkingspot = useAuthVariable(OPER_PARKINGSPOT);
  // batchTask
  const batchTask = useAuthVariable(OPER_BATCHTASK);
  // chargeRule
  const chargeRule = useAuthVariable(OPER_CHARGERULE);
  // parkingRecord
  const parkingRecord = useAuthVariable(OPER_PARKINGRECORD);
  // parkingOrder
  const parkingOrder = useAuthVariable(OPER_PARKINGORDER);
  // member
  const member = useAuthVariable(OPER_MEMBER);
  // wechatUser
  const wechatUser = useAuthVariable(OPER_WECHATUSER);
  //arrearsRecovery
  const arrearsRecovery = useAuthVariable(OPER_ARREARSRECOVERY);
  // revenue
  const revenue = useAuthVariable(OPER_REVENUE);
  // failureReport
  const failureReport = useAuthVariable(OPER_FAILUREREPORT);
  // webAppUser
  const webAppUser = useAuthVariable(OPER_WEBAPPUSER);
  // invoice
  // const invoice = useAuthVariable(OPER_INVOICE);
  //abnormalAppeal
  const abnormalAppeal = useAuthVariable(OPER_ABNORMALAPPEAL);
  // scheduleManagement
  const scheduleManagement = useAuthVariable(OPER_SCHEDULEMANAGEMENT);
  // packageManager
  const packageManager = useAuthVariable(OPER_PACKAGEMANAGER);
  // systemConfig
  const systemConfig = useAuthVariable(OPER_SYSTEMCONFIG);
  // mergeOrder
  const mergeOrder = useAuthVariable(OPER_MERGE_ORDER);
  // abnormalOrder
  const abnormalOrder = useAuthVariable(OPER_EXCEPTION_ORDER);

  useEffect(() => {
    getAuthById(authId).then((res) => {
      if (!res.data) return;
      const data = res.data;
      sensorDevice.setList(data.sensorDevice);
      patrolDevice.setList(data.patrolDevice);
      systemUser.setList(data.systemUser);
      sysRecord.setList(data.sysRecord);
      parkinglot.setList(data.parkinglot);
      parkingspot.setList(data.parkingspot);
      batchTask.setList(data.batchTask);
      chargeRule.setList(data.chargeRule);
      parkingRecord.setList(data.parkingRecord);
      parkingOrder.setList(data.parkingOrder);
      tollCollector.setList(data.tollCollector);
      member.setList(data.member);
      wechatUser.setList(data.wechatUser);
      arrearsRecovery.setList(data.arrearsRecovery);
      revenue.setList(data.revenue);
      failureReport.setList(data.failureReport);
      webAppUser.setList(data.webAppUser);
      // invoice.setList(data.invoice);
      abnormalAppeal.setList(data.abnormalAppeal);
      scheduleManagement.setList(data.scheduleManagement);
      packageManager.setList(data.packageManager);
      systemConfig.setList(data.systemConfig);
      mergeOrder.setList(data.mergeOrder);
      abnormalOrder.setList(data.abnormalOrder);
      // 用户
      simplyInit(systemUser, data.systemUser);
      // 收费人员
      simplyInit(tollCollector, data.tollCollector);
      // 系统日志
      simplyInit(sysRecord, data.sysRecord);
      // 地磁设备
      simplyInit(sensorDevice, data.sensorDevice);
      // 巡检设备
      simplyInit(patrolDevice, data.patrolDevice);
      // 路段
      simplyInit(parkinglot, data.parkinglot);
      // 泊位
      simplyInit(parkingspot, data.parkingspot);
      // 批量任务
      simplyInit(batchTask, data.batchTask);
      // 收费规则
      simplyInit(chargeRule, data.chargeRule);
      // 停车记录
      simplyInit(parkingRecord, data.parkingRecord);
      // 停车订单
      simplyInit(parkingOrder, data.parkingOrder);
      // 会员卡
      simplyInit(member, data.member);
      // 微信小程序
      simplyInit(wechatUser, data.wechatUser);
      // 欠费追缴
      simplyInit(arrearsRecovery, data.arrearsRecovery);
      // 营收统计
      simplyInit(revenue, data.revenue);
      // 故障上报
      simplyInit(failureReport, data.failureReport);
      // h5用户
      simplyInit(webAppUser, data.webAppUser);
      // 发票
      // simplyInit(invoice, data.invoice);
      // 异常申诉
      simplyInit(abnormalAppeal, data.abnormalAppeal);
      // 排班管理
      simplyInit(scheduleManagement, data.scheduleManagement);
      // 包管理
      simplyInit(packageManager, data.packageManager);
      // PDA配置
      simplyInit(systemConfig, data.systemConfig);
      // 合单
      simplyInit(mergeOrder, data.mergeOrder);
      // 异常订单
      simplyInit(abnormalOrder, data.abnormalOrder);
    });
  }, [authId]);

  return (
    <PageHeaderWrapper
      header={{
        title: `${state.ownerName}权限配置`,
        breadcrumb: {
          routes: [
            { path: '/', breadcrumbName: '首页' },
            {
              path: '/system-user',
              breadcrumbName: '用户管理',
            },
            {
              path: '/system-user/auth',
              breadcrumbName: '权限配置',
            },
          ],
        },
      }}
      footer={[
        <Button
          key="back"
          onClick={() => {
            history.goBack();
          }}
        >
          返回
        </Button>,
        <Button
          key="save"
          type="primary"
          disabled={chillDowning > 0}
          onClick={async () => {
            setChillDowning(5);
            const res = await updateAuthById(authId, {
              systemUser: systemUser.list,
              sysRecord: sysRecord.list,
              sensorDevice: sensorDevice.list,
              patrolDevice: patrolDevice.list,
              parkinglot: parkinglot.list,
              parkingspot: parkingspot.list,
              batchTask: batchTask.list,
              chargeRule: chargeRule.list,
              parkingRecord: parkingRecord.list,
              parkingOrder: parkingOrder.list,
              tollCollector: tollCollector.list,
              member: member.list,
              wechatUser: wechatUser.list,
              arrearsRecovery: arrearsRecovery.list,
              revenue: revenue.list,
              failureReport: failureReport.list,
              webAppUser: webAppUser.list,
              // invoice: invoice.list,
              abnormalAppeal: abnormalAppeal.list,
              scheduleManagement: scheduleManagement.list,
              packageManager: packageManager.list,
              systemConfig: systemConfig.list,
              mergeOrder: mergeOrder.list,
              abnormalOrder: abnormalOrder.list,
            });
            if (res.success) {
              message.success({ content: res.message, key: 'auth_msg' });
              return true;
            }
            message.error({ content: res.message, key: 'auth_msg' });
            return false;
          }}
        >
          保存
        </Button>,
      ]}
    >
      <ProCard ghost direction="column" gutter={[0, 5]}>
        {checkLen(OPER_PARKINGLOT, OPER_PARKINGSPOT, OPER_PARKINGRECORD, OPER_FAILUREREPORT) && (
          <ProCard
            direction="row"
            title="停车管理"
            subTitle="包括路段、泊位、停车记录、故障上报"
            gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}
            collapsible
            headerBordered
            wrap
          >
            {checkLen(OPER_PARKINGLOT) && (
              <ProCard
                colSpan={7}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={parkinglot.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, parkinglot);
                    }}
                    checked={parkinglot.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    路段管理
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={parkinglot.auth}
                  name="parkinglot"
                  value={parkinglot.list}
                  onChange={(list) => {
                    onChange(list, parkinglot);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_PARKINGSPOT) && (
              <ProCard
                colSpan={7}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={parkingspot.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, parkingspot);
                    }}
                    checked={parkingspot.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    泊位管理
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={parkingspot.auth}
                  name="parkingspot"
                  value={parkingspot.list}
                  onChange={(list) => {
                    onChange(list, parkingspot);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_PARKINGRECORD) && (
              <ProCard
                colSpan={5}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={parkingRecord.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, parkingRecord);
                    }}
                    checked={parkingRecord.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    停车记录
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={parkingRecord.auth}
                  name="parkingRecord"
                  value={parkingRecord.list}
                  onChange={(list) => {
                    onChange(list, parkingRecord);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_FAILUREREPORT) && (
              <ProCard
                colSpan={5}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={failureReport.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, failureReport);
                    }}
                    checked={failureReport.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    故障上报
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={failureReport.auth}
                  name="failureReport"
                  value={failureReport.list}
                  onChange={(list) => {
                    onChange(list, failureReport);
                  }}
                />
              </ProCard>
            )}
          </ProCard>
        )}
        {checkLen(OPER_SENSORDEVICE, OPER_PATROLDEVICE) && (
          <ProCard
            direction="row"
            title="设备管理"
            subTitle="包括地磁设备、巡检设备"
            gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}
            collapsible
            headerBordered
            wrap
          >
            {checkLen(OPER_SENSORDEVICE) && (
              <ProCard
                colSpan={12}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={sensorDevice.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, sensorDevice);
                    }}
                    checked={sensorDevice.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    地磁设备
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={sensorDevice.auth}
                  name="sensorDevice"
                  value={sensorDevice.list}
                  onChange={(list) => {
                    onChange(list, sensorDevice);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_PATROLDEVICE) && (
              <ProCard
                colSpan={12}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={patrolDevice.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, patrolDevice);
                    }}
                    checked={patrolDevice.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    巡检设备
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={patrolDevice.auth}
                  name="patrolDevice"
                  value={patrolDevice.list}
                  onChange={(list) => {
                    onChange(list, patrolDevice);
                  }}
                />
              </ProCard>
            )}
          </ProCard>
        )}
        {checkLen(
          OPER_PARKINGORDER,
          OPER_CHARGERULE,
          OPER_MERGE_ORDER,
          OPER_ARREARSRECOVERY,
          OPER_EXCEPTION_ORDER,
        ) && (
          <ProCard
            direction="row"
            title="订单管理"
            subTitle="包括停车订单、收费规则、订单合并、欠费追缴,异常订单"
            gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}
            collapsible
            headerBordered
            wrap
          >
            {checkLen(OPER_PARKINGORDER) && (
              <ProCard
                colSpan={7}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={parkingOrder.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, parkingOrder);
                    }}
                    checked={parkingOrder.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    停车订单
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={parkingOrder.auth}
                  name="parkingOrder"
                  value={parkingOrder.list}
                  onChange={(list) => {
                    onChange(list, parkingOrder);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_CHARGERULE) && (
              <ProCard
                colSpan={7}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={chargeRule.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, chargeRule);
                    }}
                    checked={chargeRule.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    收费规则
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={chargeRule.auth}
                  name="chargeRule"
                  value={chargeRule.list}
                  onChange={(list) => {
                    onChange(list, chargeRule);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_MERGE_ORDER) && (
              <ProCard
                colSpan={5}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={mergeOrder.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, mergeOrder);
                    }}
                    checked={mergeOrder.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    订单合并
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={mergeOrder.auth}
                  name="mergeOrder"
                  value={mergeOrder.list}
                  onChange={(list) => {
                    onChange(list, mergeOrder);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_ARREARSRECOVERY) && (
              <ProCard
                colSpan={5}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={arrearsRecovery.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, arrearsRecovery);
                    }}
                    checked={arrearsRecovery.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    欠费追缴
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={arrearsRecovery.auth}
                  name="arrearsRecovery"
                  value={arrearsRecovery.list}
                  onChange={(list) => {
                    onChange(list, arrearsRecovery);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_EXCEPTION_ORDER) && (
              <ProCard
                colSpan={5}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={abnormalOrder.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, abnormalOrder);
                    }}
                    checked={abnormalOrder.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    异常订单
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={abnormalOrder.auth}
                  name="abnormalOrder"
                  value={abnormalOrder.list}
                  onChange={(list) => {
                    onChange(list, abnormalOrder);
                  }}
                />
              </ProCard>
            )}
          </ProCard>
        )}
        {checkLen(OPER_TOLLCOLLECTOR, OPER_SCHEDULEMANAGEMENT) && (
          <ProCard
            direction="row"
            title="员工管理"
            subTitle="包括收费员管理、排班管理"
            gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}
            collapsible
            headerBordered
            wrap
          >
            {checkLen(OPER_TOLLCOLLECTOR) && (
              <ProCard
                colSpan={12}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={tollCollector.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, tollCollector);
                    }}
                    checked={tollCollector.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    收费员管理
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={tollCollector.auth}
                  name="tollCollector"
                  value={tollCollector.list}
                  onChange={(list) => {
                    onChange(list, tollCollector);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_SCHEDULEMANAGEMENT) && (
              <ProCard
                colSpan={12}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={scheduleManagement.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, scheduleManagement);
                    }}
                    checked={scheduleManagement.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    排班管理
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={scheduleManagement.auth}
                  name="scheduleManagement"
                  value={scheduleManagement.list}
                  onChange={(list) => {
                    onChange(list, scheduleManagement);
                  }}
                />
              </ProCard>
            )}
          </ProCard>
        )}
        {checkLen(OPER_WEBAPPUSER, OPER_ABNORMALAPPEAL, OPER_MEMBER) && (
          <ProCard
            direction="row"
            title="微信端管理"
            subTitle="包括微信端用户、异常申诉、会员管理"
            gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}
            collapsible
            headerBordered
            wrap
          >
            {/* {checkLen(OPER_WECHATUSER) && (
              <ProCard
                colSpan={9}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={wechatUser.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, wechatUser);
                    }}
                    checked={wechatUser.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    小程序用户
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={wechatUser.auth}
                  name="wechatUser"
                  value={wechatUser.list}
                  onChange={(list) => {
                    onChange(list, wechatUser);
                  }}
                />
              </ProCard>
            )} */}
            {checkLen(OPER_WEBAPPUSER) && (
              <ProCard
                colSpan={4}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={webAppUser.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, webAppUser);
                    }}
                    checked={webAppUser.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    公众号用户
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={webAppUser.auth}
                  name="webAppUser"
                  value={webAppUser.list}
                  onChange={(list) => {
                    onChange(list, webAppUser);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_MEMBER) && (
              <ProCard
                colSpan={7}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={member.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, member);
                    }}
                    checked={member.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    会员卡管理
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={member.auth}
                  name="member"
                  value={member.list}
                  onChange={(list) => {
                    onChange(list, member);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_ABNORMALAPPEAL) && (
              <ProCard
                colSpan={4}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={abnormalAppeal.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, abnormalAppeal);
                    }}
                    checked={abnormalAppeal.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    异常申诉
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={abnormalAppeal.auth}
                  name="abnormalAppeal"
                  value={abnormalAppeal.list}
                  onChange={(list) => {
                    onChange(list, abnormalAppeal);
                  }}
                />
              </ProCard>
            )}
          </ProCard>
        )}
        {checkLen(OPER_SYSTEMUSER, OPER_PACKAGEMANAGER, OPER_SYSTEMCONFIG) && (
          <ProCard
            direction="row"
            title="系统用户管理"
            subTitle="包括系统用户、包管理、系统配置"
            gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}
            collapsible
            headerBordered
            wrap
          >
            {checkLen(OPER_SYSTEMUSER) && (
              <ProCard
                colSpan={5}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={systemUser.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, systemUser);
                    }}
                    checked={systemUser.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    系统用户
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={systemUser.auth}
                  name="systemUser"
                  value={systemUser.list}
                  onChange={(list) => {
                    onChange(list, systemUser);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_PACKAGEMANAGER) && (
              <ProCard
                colSpan={5}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={packageManager.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, packageManager);
                    }}
                    checked={packageManager.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    包管理
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={packageManager.auth}
                  name="packageManager"
                  value={packageManager.list}
                  onChange={(list) => {
                    onChange(list, packageManager);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_SYSTEMCONFIG) && (
              <ProCard
                colSpan={14}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={systemConfig.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, systemConfig);
                    }}
                    checked={systemConfig.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    系统配置
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={systemConfig.auth}
                  name="systemConfig"
                  value={systemConfig.list}
                  onChange={(list) => {
                    onChange(list, systemConfig, 'systemConfig');
                  }}
                />
              </ProCard>
            )}
          </ProCard>
        )}
        {checkLen(OPER_REVENUE, OPER_BATCHTASK, OPER_SYSRECORD) && (
          <ProCard
            direction="row"
            title="其他"
            subTitle="包括营收统计、批量任务、系统日志"
            gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}
            collapsible
            headerBordered
            wrap
          >
            {checkLen(OPER_REVENUE) && (
              <ProCard
                colSpan={4}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={revenue.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, revenue);
                    }}
                    checked={revenue.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    营收统计
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={revenue.auth}
                  name="revenue"
                  value={revenue.list}
                  onChange={(list) => {
                    onChange(list, revenue);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_BATCHTASK) && (
              <ProCard
                colSpan={16}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={batchTask.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, batchTask);
                    }}
                    checked={batchTask.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    批量任务
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={batchTask.auth}
                  name="batchTask"
                  value={batchTask.list}
                  onChange={(list) => {
                    onChange(list, batchTask);
                  }}
                />
              </ProCard>
            )}
            {checkLen(OPER_SYSRECORD) && (
              <ProCard
                colSpan={4}
                style={{ height: '100%' }}
                title={
                  <Checkbox
                    indeterminate={sysRecord.intermin}
                    onChange={(e) => {
                      onCheckAllChange(e, sysRecord);
                    }}
                    checked={sysRecord.checkAll}
                    onClick={(e) => e.stopPropagation()}
                  >
                    系统日志
                  </Checkbox>
                }
                bordered
              >
                <CheckboxGroup
                  options={sysRecord.auth}
                  name="sysRecord"
                  value={sysRecord.list}
                  onChange={(list) => {
                    onChange(list, sysRecord);
                  }}
                />
              </ProCard>
            )}
          </ProCard>
        )}
      </ProCard>
    </PageHeaderWrapper>
  );
};

export default AuthConfig;
